<template>
  <div class="pags">

    <van-nav-bar
      title="新增拜访信息"
      left-arrow
      @click-left="$router.push('/myClients')"
    >
      <template #right>
        <img
          src="../../assets/images/首页按钮.png"
          alt=""
          width="50%"
          @click="$router.push('/home')"
        />
      </template>
    </van-nav-bar>
    <div class="box">
      <van-cell-group>
        <van-field
          v-model="value1"
          label="客户名称"
          required
          is-link
          placeholder="下拉搜索"
          @click="num = !num"
        />
      </van-cell-group>
    </div>
    <div class="box">
      <van-field
        readonly
        clickable
        name="picker"
        :value="value2"
        label="拜访标题"
        @click="showPicker = true"
        required
        is-link
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="picker"
        :value="value3"
        label="拜访原因"
        @click="showPickers = true"
        required
        is-link
      />
      <van-popup v-model="showPickers" position="bottom">
        <van-picker
          show-toolbar
          :columns="columnss"
          @confirm="onConfirms"
          @cancel="showPickers = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="value4"
        label="拜访时间"
        required
        @click="showPicker4 = true"
      />
      <van-popup v-model="showPicker4" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :columns-order="['year', 'month', 'day']"
          :formatter="formatter"
          @confirm="onConfirm4"
          @cancel="showPicker4 = false"
        />
      </van-popup>
    </div>
    <div class="box1">
      <p>拜访地址</p>
      <textarea v-model="value5" placeholder="请输入"></textarea>
    </div>
    <div class="box1">
      <p>拜访情况</p>
      <textarea v-model="value6" placeholder="请输入"></textarea>
    </div>
    <div class="box1">
      <p>竞争信息收集情况</p>
      <textarea v-model="value8" placeholder="请输入"></textarea>
    </div>
    <div class="btn">
      <van-button color="#003399" size="large" round @click="addFn"
        >保存</van-button
      >
    </div>
    <div :class="num ? 'keconent' : 'keconent num'">
      <van-nav-bar left-arrow title="选择客户" @click-left="$router.back()">
        <template #right>
          <img src="../../assets/images/首页按钮.png" alt="" height="21px" />
        </template>
      </van-nav-bar>
      <van-search v-model="value7" show-action placeholder="请输入关键联系人">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <van-cell-group>
        <van-cell
          :title="item.custName"
          :icon="require('../../assets/images/头像男 拷贝 4.png')"
          is-link
          center
          v-for="item in records"
          :key="item.id"
          @click="goNewVisits(item.id, item.custName)"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { Cust, visit } from "../../request/api";
export default {
  data() {
    return {
      value1: "",
      value2: "",
      value5: "",
      value6: "",
      value7: "",
      value8: "",
      columns: ["例行走访", "售中支撑", "售前支撑"],
      showPicker: false,
      value3: "",
      columnss: ["例行走访", "售中支撑", "售前支撑"],
      showPickers: false,
      value4: "",
      currentDate: new Date(),
      showPicker4: false,
      records: [],
      num: true,
      id: 0,
    };
  },
  methods: {
    onConfirm(value) {
      this.value2 = value;
      this.showPicker = false;
    },
    onConfirms(value) {
      this.value3 = value;
      this.showPickers = false;
    },
    onConfirm4(time) {
      // console.log(time);
      const d = new Date(time);
      let year = d.getFullYear(); //年
      let month = d.getMonth() + 1; //月
      let day = d.getDate(); //日
      let hours = d.getHours(); //时
      let minutes = d.getMinutes(); //分
      let senc = d.getSeconds(); //秒
      month = month < 10 ? "0" + month : (month = month);
      day = day < 10 ? "0" + day : (day = day);
      hours = hours < 10 ? "0" + hours : (hours = hours);
      minutes = minutes < 10 ? "0" + minutes : (minutes = minutes);
      senc = senc < 10 ? "0" + senc : (senc = senc);

       let resDate =`${year}-${month}-${day} ${hours}:${minutes}:${senc}`;
      this.value4 = resDate;
      this.showPicker4 = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type === "day") {
        return `${val}日`;
      }
      return val;
    },
    onSearch() {},
    goNewVisits(id, name) {
      this.num = !this.num;
      this.id = id;
      this.value1 = name;
    },
    // '2020-02-20 00:00:00'
    addFn() {
      // console.log(this.value4);
      visit({
        custId: this.id,
        custName: this.value1,
        visitTime: this.value4,
        visitAddress: this.value5,
        visitTitle: this.value2,
        visitReason: this.value3,
        visitSituation: this.value6,
        collectSituation: this.value8,
        
      }).then((res) => {
        // console.log(res);
      });
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.value1 = this.$route.params.name;
    Cust({
      keyword: "",
      current: 1,
      size: 8,
    }).then((res) => {
      // console.log(res);
      this.records = res.data.records;
    });
  },
};
</script>
 
<style lang = "less" scoped>

.box {
  margin-top: 10px;
}
.box1 {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  font-size: 12px;
  p {
    color: #646566;
  }
  textarea {
    border: 0;
    width: 250px;
    height: 100px;
  }
}
/deep/ .van-nav-bar {
  background-color: #003399;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-icon-arrow-left::before {
  font-size: 20px;
  color: #fff;
}
.van-search {
  margin-bottom: 10px;
}
.van-search__action {
  color: #003399;
}
.van-search__content {
  border-radius: 10px;
}
.van-cell-group {
  .van-cell {
    height: 60px;
    .van-icon__image {
      height: 40px;
      width: 40px;
      margin-right: 16px;
    }
    font-size: 16px;
    .van-cell__left-icon {
      height: 60px;
      margin-top: 20px;
    }
  }
}
.keconent {
  width: 100%;
  position: absolute;
  top: -600px;
  transition: all 1s;
  background-color: #fff;
}
.num {
  top: 0;
}
.btn {
  padding: 10px;
  box-sizing: border-box;
  margin-top: 15px;
  background-color: #fff;
}
</style>